<template>
	<div class="slide-page-left">
		<nav-back></nav-back>
		<ncu-circle-button
			:icon="option.icon">
		</ncu-circle-button>
		<div class="slide-page-left__title glass">
			{{ option.text }}
		</div>
		<slot></slot>
	</div>
</template>

<script>
    export default {
		props: {
			option: {
				type: Object
			}
		},
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
	.slide-page-left {
		width: 21%;
		padding: 4% 2%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff29;
		
		&__title {
			width: calc(90% - 20px);
			margin: 0 auto;
			padding: 10px;
			text-align: center;
			border-radius: 30px;
			font-weight: bold;
			font-size: 1.2rem;
			
		}
	}
</style>


